<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 聊天</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        #chat-box {
            border: 1px solid #ccc;
            padding: 10px;
            height: 300px;
            overflow-y: auto;
            margin-bottom: 10px;
        }

        #input-box {
            width: 70%;
            padding: 8px;
            border: 1px solid #ccc;
        }

        #send-btn {
            padding: 8px 15px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="chat-box"></div>
    <input type="text" id="input-box" placeholder="输入你的消息">
    <button id="send-btn">发送</button>

    <script>
        // API 相关信息
        const apiUrl = 'http://spark-api-open.xf-yun.com/v1/chat/completions';
        const apiKey = 'fEgjnjVOIIfgOBbJKxFU:ErnditCVrUjsusgivtbr';

        // 获取 DOM 元素
        const chatBox = document.getElementById('chat-box');
        const inputBox = document.getElementById('input-box');
        const sendBtn = document.getElementById('send-btn');

        // 发送消息函数
        function sendMessage() {
            const message = inputBox.value.trim();
            if (message === '') return;

            // 显示用户消息
            appendMessage('你', message);

            // 创建 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();
            xhr.open('POST', apiUrl, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.setRequestHeader('Authorization', `Bearer ${apiKey}`);

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        const aiMessage = response.choices[0].message.content;
                        appendMessage('AI', aiMessage);
                    } else {
                        appendMessage('AI', '请求出错，请稍后再试。');
                    }
                }
            };

            // 构建请求数据，指定使用 Lite 模型
            const data = JSON.stringify({
                "model": "spark-lite", 
                "messages": [
                    {
                        "role": "user",
                        "content": message
                    }
                ]
            });

            // 发送请求
            xhr.send(data);

            // 清空输入框
            inputBox.value = '';
        }

        // 追加消息到聊天框
        function appendMessage(sender, message) {
            const messageElement = document.createElement('p');
            messageElement.textContent = `${sender}: ${message}`;
            chatBox.appendChild(messageElement);
            chatBox.scrollTop = chatBox.scrollHeight;
        }

        // 绑定发送按钮点击事件
        sendBtn.addEventListener('click', sendMessage);

        // 绑定输入框回车事件
        inputBox.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>

</html>